<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 倒计时 -->
    <div class="app-countdown dpflex">
        <span class="time">3</span>
    </div>
    <!-- 运动中 -->
    <div class="app-sportIng dpflex fdcolumn">
        <div class="title pd16">
            <!-- 标题 -->
            <p>户外跑</p>
            <div class="dpflex justspacebt f22 mt8">
                <span>运动中</span>
                <p>
                    <i class="iconfont icon-play f22 mr10"></i>
                    <i class="iconfont icon-practice f22"></i>
                </p>
            </div>
            <!-- 公里数 -->
            <div class="distanceBox mt50">
                <span class="distanceText f80">99.99</span>公里
            </div>
            <!-- gps -->
            <div class="gps dpflex justspacebt mt80">
                <span class="pd16">GPS信号度低, 数据精准度低</span>
                <hr class="flex1">
                <i class="iconfont icon-map2 pd16"></i>
            </div>
            <!-- 信息 -->
            <div class="infoBox dpflex mt50">
                <div class="flex1 dpflex fdcolumn f16">
                    <i class="iconfont icon-speed f30"></i>
                    <span class="mt8">配速</span>
                    <span class="sudu mt16 f30">--</span>
                </div>
                <div class="flex1 dpflex fdcolumn f16">
                    <i class="iconfont icon-time f30"></i>
                    <span class="mt8">用时</span>
                    <span class="timerText mt16 f30">00:00:00</span>
                </div>
                <div class="flex1 dpflex fdcolumn f16">
                    <i class="iconfont icon-calorie f30"></i>
                    <span class="mt8">千卡</span>
                    <span class="calorieText mt16 f30">0</span>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="Btn dpflex justspaceev mt30">
                <div class="suspend dpflex fdcolumn">
                    <i class="iconfont icon-play f40"></i>
                    <span>暂停</span>
                </div>
                <div class="continue dpflex fdcolumn">
                    <i class="iconfont icon-pause f40"></i>
                    <span>继续</span>
                </div>
                <div class="stop dpflex fdcolumn">
                    <i class="iconfont icon-end f40"></i>
                    <span>结束</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 地图 -->
    <div class="app-map dpflex" id="app-map">
        <div id="map"></div>
        <div class="map-btn pd16">
            <p class="mapBack">返回</p>
            <p class="mapCompletion">完成</p>
        </div>
        <div class="mapMsgBox pd16">
            <p>1</p>
            <hr>
            <div class="sportMegBox dpflex">
                <div class="flex1 dpflex fdcolumn f16">
                    <span class="mt8">配速</span>
                    <span class="mapSudu mt16 f30">--</span>
                </div>
                <div class="flex1 dpflex fdcolumn f16">
                    <span class="mt8">用时</span>
                    <span class="mapTimerText mt16 f30">00:00:00</span>
                </div>
                <div class="flex1 dpflex fdcolumn f16">
                    <span class="mt8">千卡</span>
                    <span class="mapCalorieText mt16 f30">0</span>
                </div> 
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=feEb253Lm80YIlKIL189mnYyh6rlV1gB"></script>
</body>

</html>